/**
 * 应用首页组件
 * 
 * 功能说明：
 * - 平台欢迎页面
 * - 热门商品展示
 * - 分类快速导航
 * - 平台特色介绍
 * - 最新动态展示
 */

import React from 'react'
import { 
  Row,           //行
  Col,           //列
  Card,          //卡片
  Button,        //按钮
  Typography,    //排版
  Space,         //间距
  Carousel,      //走马灯
  Statistic,     //统计数值
  Avatar,        //头像
  Tag            //标签
} from 'antd'
import { 
  ShopOutlined,    //商店图标
  SafetyOutlined,  //安全图标
  TeamOutlined,    //团队图标
  TrophyOutlined,  //奖杯图标
  RightOutlined,   //右箭头图标
  UserOutlined     //用户图标
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'  //导航钩子，调用 navigate('/products') 就跳转到商品页
import { useAuthStore } from '@stores/auth'     // 是 Zustand 状态库的引用，它是个共享仓库。用户登录状态（isAuthenticated）存在这里，任何组件都能拿到，不用层层传递。
const { Title, Paragraph, Text } = Typography   //排版组件解构：标题、段落、普通文本

/**
 * 首页组件
 */
function HomePage() {
  const navigate = useNavigate()
  const { isAuthenticated } = useAuthStore()

  /**
   * 平台特色数据
   */
  const features = [
    {
      icon: <SafetyOutlined style={{ fontSize: 32, color: '#52c41a' }} />,
      title: '安全可靠'
    },
    {
      icon: <TeamOutlined style={{ fontSize: 32, color: '#1890ff' }} />,
      title: '交易便捷'
    },
    {
      icon: <ShopOutlined style={{ fontSize: 32, color: '#ce2ed1ff' }} />,
      title: '品类丰富'
    },
    {
      icon: <TrophyOutlined style={{ fontSize: 32, color: '#fa8c16' }} />,
      title: '信誉保障'
    }
  ]

  /**
   * 热门分类数据
   */
  const categories = [
    { name: '数码电子', icon: '📱', },
    { name: '图书教材', icon: '📚', },
    { name: '服装配饰', icon: '👔', },
    { name: '生活用品', icon: '🏠', },
    { name: '体育运动', icon: '⚽', },
    { name: '文具办公', icon: '✏️', }
  ]


  return (
    <div style={{ 
      marginTop: 64, // 头部高度
      marginLeft: isAuthenticated ? 200 : 0, // 侧边栏宽度
      minHeight: 'calc(100vh - 64px)'
    }}>
      {/* 欢迎横幅 */}
      <div 
        style={{ 
          background: 'linear-gradient(135deg, #66e1eaff 0%, #a24b85ff 100%)',
          color: 'white',
          padding: '80px 24px',
          textAlign: 'center'
        }}
      >
        <Title level={1} style={{ color: 'white', marginBottom: 16 , fontFamily: '"STXinwei", "华文新魏", serif',fontSize: 48}}>
          欢迎来到二手交易平台
        </Title>
        <Paragraph style={{ color: 'white', fontSize: 20, maxWidth: 600, margin: '0 auto 32px' ,fontFamily: '"KaiTi", "楷体", serif'}}>
          安全可靠的内部交易平台，让闲置物品焕发新生命，让用户间的交易更便捷
        </Paragraph>
        <Space size="large">
          <Button 
            type="primary" 
            size="large"
            style={{ borderRadius: 20, minWidth: 120 }}
            onClick={() => navigate('/products')}
          >
            开始购物
          </Button>
          {isAuthenticated ? (
            <Button 
              size="large"
              style={{ borderRadius: 20, minWidth: 120, background: 'white', color: '#1890ff' }}
              onClick={() => navigate('/products/new')}
            >
              发布商品
            </Button>
          ) : (
            <Button 
              size="large"
              style={{ borderRadius: 20, minWidth: 120, background: 'white', color: '#1890ff' }}
              onClick={() => navigate('/register')}
            >
              立即注册
            </Button>
          )}
        </Space>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 24px' }}>
        

        {/* 热门分类 */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <Title level={2}>热门分类</Title>
            <Paragraph type="secondary">
              快速找到你需要的商品类型
            </Paragraph>
          </div>
          
          <Row gutter={[16, 16]}>
            {categories.map((category, index) => (
              <Col xs={12} sm={8} md={4} key={index}>
                <Card 
                  hoverable
                  style={{ textAlign: 'center', cursor: 'pointer' }}
                  onClick={() => navigate(`/products?category=${category.name}`)}
                >
                  <div style={{ fontSize: 32, marginBottom: 8 }}>
                    {category.icon}
                  </div>
                  <Title level={5} style={{ marginBottom: 4 }}>
                    {category.name}
                  </Title>
                </Card>
              </Col>
            ))}
          </Row>
        </div>

        {/* 平台特色 */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <Title level={2}>平台特色</Title>
            <Paragraph type="secondary">
              为什么选择我们的交易平台
            </Paragraph>
          </div>
          
          <Row gutter={[24, 24]}>
            {features.map((feature, index) => (
              <Col xs={24} sm={12} md={6} key={index}>
                <Card style={{ textAlign: 'center', height: '100%' }}>
                  <div style={{ marginBottom: 16 }}>
                    {feature.icon}
                  </div>
                  <Title level={4} style={{ marginBottom: 8 }}>
                    {feature.title}
                  </Title>
                  <Paragraph type="secondary">
                    {feature.description}
                  </Paragraph>
                </Card>
              </Col>
            ))}
          </Row>
        </div>

        {/* 使用指南 */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ 
            textAlign: 'center', 
            marginBottom: 48,
            position: 'relative', 
            zIndex: 2
          }}>
            <Title level={2}>如何使用</Title>
            <Paragraph 
              type="secondary"
              style={{
                padding: '0 12px',
                maxWidth: 800,
                margin: '0 auto'
              }}
            >
              简单三步，开始你的交易之旅
            </Paragraph>
          </div>
          
          <Row gutter={[24, 24]}>
            <Col xs={24} md={8}>
              <Card  style={{ textAlign: 'center', boxShadow: '0 1px 6px rgba(0,0,0,0.06)' }}>
                <Avatar 
                  size={64} 
                  style={{ background: '#1890ff', marginBottom: 16 }}
                >
                  1
                </Avatar>
                <Title level={4}>注册账号</Title>
                <Paragraph type="secondary">
                  使用邮箱注册账号
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card  style={{ textAlign: 'center', boxShadow: '0 1px 6px rgba(0,0,0,0.06)' }}>
                <Avatar 
                  size={64} 
                  style={{ background: '#52c41a', marginBottom: 16 }}
                >
                  2
                </Avatar>
                <Title level={4}>浏览商品</Title>
                <Paragraph type="secondary">
                  搜索或浏览感兴趣的商品，联系卖家
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card  style={{ textAlign: 'center', boxShadow: '0 1px 6px rgba(0,0,0,0.06)' }}>
                <Avatar 
                  size={64} 
                  style={{ background: '#fa8c16', marginBottom: 16 }}
                >
                  3
                </Avatar>
                <Title level={4}>完成交易</Title>
                <Paragraph type="secondary">
                  交易，完成后进行评价反馈
                </Paragraph>
              </Card>
            </Col>
          </Row>
        </div>

        {/* 行动召唤 */}
        {!isAuthenticated && (
          <Card 
            style={{ 
              textAlign: 'center',
              background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
              border: 'none'
            }}
          >
            <Title level={3}>准备好开始了吗？</Title>
            <Paragraph style={{ fontSize: 16, marginBottom: 24 }}>
              加入我们，体验安全便捷的交易
            </Paragraph>
            <Space size="large">
              <Button 
                type="primary" 
                size="large"
                style={{ borderRadius: 20 }}
                onClick={() => navigate('/register')}
              >
                立即注册
              </Button>
              <Button 
                size="large"
                style={{ borderRadius: 20 }}
                onClick={() => navigate('/login')}
              >
                已有账号？登录
              </Button>
            </Space>
          </Card>
        )}
      </div>
    </div>
  )
}

export default HomePage